import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:richedit/constant.dart';
import 'package:richedit/data/image_entity.dart';
import 'package:richedit/data/image_group_entity.dart';
import 'package:richedit/photo/photo_view_screen.dart';
import 'package:richedit/res/color.dart';
import 'package:richedit/widget/image_widget.dart';

class ImageGroupEdit extends StatefulWidget {
  ImageGroupEntity data;

  ImageGroupEdit(this.data);

  @override
  _ImageGroupEditState createState() => _ImageGroupEditState();
}

class _ImageGroupEditState extends State<ImageGroupEdit> {
  @override
  Widget build(BuildContext context) {
    return Flex(
      mainAxisSize: MainAxisSize.min,
      direction:
          widget.data.isHorizontal != null && !widget.data.isHorizontal! ? Axis.vertical : Axis.horizontal,
      children: widget.data.children == null ? <Widget>[] :widget.data.children!.map((e) {
        if (widget.data.isHorizontal == false) {
          return ImageEdit(e);
        } else {
          return Expanded(child: ImageEdit(e));
        }
      }).toList(),
    );
  }
}

class ImageGroupPreview extends StatefulWidget {
  ImageGroupEntity data;

  ImageGroupPreview(this.data);

  @override
  _ImageGroupPreviewState createState() => _ImageGroupPreviewState();
}

class _ImageGroupPreviewState extends State<ImageGroupPreview> {
  @override
  Widget build(BuildContext context) {
    return Flex(
      direction:
          widget.data.isHorizontal != null && !widget.data.isHorizontal! ? Axis.vertical : Axis.horizontal,
      children: widget.data.children!.map((e) {
        if (widget.data.isHorizontal == false) {
          return ImagePreview(e);
        } else {
          return Expanded(
              child: GestureDetector(
                onTap: (){
                  PhotoViewScreen.open(context: context, photoUrl: e.url!);
                },
                child: AspectRatio(
                    aspectRatio: 1,
                    child: Image.network(
                      e.url!,
                      fit: BoxFit.cover,
                    )),
              ));
        }
      }).toList(),
    );
  }
}

class ImageGroupSetting extends StatefulWidget {
  ImageGroupEntity data;
  ValueChanged onChanged;

  ImageGroupSetting(this.data, this.onChanged);

  @override
  _ImageGroupSettingState createState() => _ImageGroupSettingState();
}

class _ImageGroupSettingState extends State<ImageGroupSetting> {
  TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    widget.data.isHorizontal ??= true;
    _controller = TextEditingController(text: "${widget.data.children?.length}");
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(topLeft: Radius.circular(8), topRight: Radius.circular(8)),
        color: Colors.white,
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(
            height: 50,
            child: Row(
              children: [
                Text("是否横向"),
                Spacer(),
                CupertinoSwitch(
                    value: widget.data.isHorizontal??true,
                    onChanged: (value) {
                      widget.data.isHorizontal = value;
                      setState(() {});
                      widget.onChanged(widget.data);
                    }),
              ],
            ),
          ),
          SizedBox(
            height: 50,
            child: Row(
              children: [
                Text("图片个数"),
                Spacer(),
                IconButton(
                    icon: Icon(
                      Icons.remove_circle_outline_rounded,
                      color: Colour.text_3,
                    ),
                    onPressed: () {
                      if (widget.data.children != null && widget.data.children!.length > 1) {
                        widget.data.children!.removeAt(widget.data.children!.length - 1);
                        widget.onChanged(widget.data);
                        setState(() {});
                      }
                    }),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8),
                  child: Text("${widget.data.children?.length}"),
                ),
                IconButton(
                    icon: Icon(
                      Icons.add_circle_outline_rounded,
                      color: Colour.text_3,
                    ),
                    onPressed: () {
                      if (widget.data.children != null && widget.data.children!.length < 4) {
                        widget.data.children!.add(ImageEntity()..name = WidgetType.Image);
                        widget.onChanged(widget.data);
                        setState(() {});
                      }
                    }),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Future<ImageGroupEntity?> showImageGroupSetting(
    BuildContext context, ImageGroupEntity data, ValueChanged onChanged) {
  return showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (context) {
        return ImageGroupSetting(data, onChanged);
      });
}
